<template>
    <div class="auth-container">
      <div class="auth-card">
        <h1 class="auth-title">注册账号</h1>
        <form @submit.prevent="handleRegister" class="auth-form">
          <div class="form-group">
            <label for="username">用户名</label>
            <input v-model="form.username" type="text" id="username" required>
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input v-model="form.password" type="password" id="password" required>
          </div>
          <div class="form-group">
            <label for="realName">真实姓名</label>
            <input v-model="form.realName" type="text" id="realName" required>
          </div>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input v-model="form.email" type="email" id="email" required>
          </div>
          <div class="form-group">
            <label for="age">年龄</label>
            <input v-model="form.age" type="number" id="age" required>
          </div>
          <div class="form-group">
            <label for="stuNum">学号</label>
            <input v-model="form.stuNum" type="text" id="stuNum" required>
          </div>
          <div class="form-group">
            <label for="className">班级</label>
            <input v-model="form.className" type="text" id="className" required>
          </div>
          <button type="submit" class="auth-btn">注册</button>
        </form>
        <p class="auth-footer">
          已有账号？<router-link to="/login">立即登录</router-link>
        </p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useAuthStore } from '@/stores/auth'
  import { useRouter } from 'vue-router'
  
  const authStore = useAuthStore()
  const router = useRouter()
  
  const form = ref({
    username: '',
    password: '123456',
    realName: '成型',
    email: '',
    age: 20,
    stuNum: '23003016',
    className: '23软件技术1班'
  })
  
  const handleRegister = async () => {
    try {
      await authStore.register(form.value)
      router.push('/login')
    } catch (error) {
      console.error('注册失败:', error)
    }
  }
  </script>
  
  <style scoped lang="scss">
  @import '@/styles/auth';
  </style>